import React, {useEffect, useState} from 'react';
import {View, Text, Image, TouchableOpacity, ScrollView} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import Video from 'react-native-video';
import AreaView from '../../components/Layout/AreaView';
import styles from './style';
import LikeInput from '../../components/LikeInput';
import BaseUrl from '../../config/BaseUrl';
import {
  courseDetail,
  courseCommonList,
  courseCatalogList,
  fileinfo,
  sendComment,
} from '../../service/my';
import { Toast } from '@ant-design/react-native';

const ListenCouse = (props) => {
  const navigation = useNavigation();
  const {
    route: {
      params: {courseId},
    },
  } = props;
  const [_couseDetail, setCouseDetail] = useState({});
  const [_courseCommonList, setCourseCommonList] = useState([]);
  const [_courseCatalogList, setCourseCatalogList] = useState([]);
  const [fileDetail, setFileDetail] = useState({});
  useEffect(() => {
    courseDetail(courseId).then((res) => {
      console.log(res);
      if (res.code === 200) {
        setCouseDetail(res.data);
      }
    });
    init();
    courseCatalogList(courseId).then((res) => {
      console.log(res);
      if (res.code === 200) {
        setCourseCatalogList(res.data);
        ctlClk(res.data[0]);
      }
    });
  }, []);
  const init = () => {
    courseCommonList(courseId).then((res) => {
      console.log(res);
      if (res.code === 200) {
        setCourseCommonList(res.rows);
      }
    });
  };
  const ctlClk = ({fileId}) => {
    fileinfo(fileId).then((res) => {
      if (res.code === 200) {
        setFileDetail(res.data);
      }
    });
  };
  const sendCommentFn = (val) => {
    if (!val.trim()) {
      Toast.info('请输入内容');
      return;
    }
    sendComment({
      artId: courseId,
      comtDesc: val,
      comtSrc: '01',
      srcId: courseId,
      srcNam: _couseDetail.courseTitle,
      topicId: '1004',
    }).then((res) => {
      if (res.code === 200) {
        init();
      }
    });
  };
  return (
    <AreaView>
      <Video
        style={styles.video}
        controls={true}
        muted={false} //控制音频是否静音
        repeat={false} //确定在到达结尾时是否重复播放视频。
        playInBackground={false}
        allowsExternalPlayback={false}
        ignoreSilentSwitch={'ignore'}
        resizeMode="contain" //缩放模式
        source={{
          uri: BaseUrl.imgurl + fileDetail?.filePath,
        }}
      />
      <ScrollView
        showsVerticalScrollIndicator={false}
        style={styles.content_container}>
        <View style={styles.video_info}>
          <View style={styles.info_left}>
            <Image
              style={styles.cover}
              source={{uri: BaseUrl.imgurl + _couseDetail?.teacherImage}}
            />
            <View style={styles.title_time}>
              <Text style={styles.title_text}>{_couseDetail?.courseTitle}</Text>
              <Text style={styles.title_time}>
                主讲老师：{_couseDetail?.teacherNam} {_couseDetail?.createTime}
              </Text>
            </View>
          </View>
          {/* <TouchableOpacity>
            <Image
              source={require('../../assets/images/couse_downlaod.png')}
              style={styles.icon_download}
            />
          </TouchableOpacity> */}
        </View>
        <View style={styles.title_container}>
          <View style={styles.line} />
          <Text style={styles.disc_title}>课程章节</Text>
        </View>
        {(_courseCatalogList || []).map((item) => (
          <View key={item.fileId} style={styles.disc_list}>
            <TouchableOpacity
              style={styles.disc_info}
              onPress={() => ctlClk(item)}>
              <Text style={styles.ques}>{item.ctlTitle}</Text>
            </TouchableOpacity>
          </View>
        ))}
        <View style={styles.title_container}>
          <View style={styles.line} />
          <Text style={styles.disc_title}>课程评价</Text>
        </View>
        {(_courseCommonList || []).map((item) => (
          <View key={item.comtId} style={styles.disc_list}>
            <Image
              style={styles.disc_cover}
              source={{uri: BaseUrl.imgurl + item.custImage}}
            />
            <View style={styles.disc_info}>
              <Text style={styles.ques}>
                {item.nickName} {item.createTime}
              </Text>
              <Text style={styles.answer}>
                {/* <Text style={styles.name}>老师回答：</Text> */}
                {item.comtDesc}
              </Text>
            </View>
          </View>
        ))}
      </ScrollView>
      <LikeInput onSend={sendCommentFn} />
    </AreaView>
  );
};

export default ListenCouse;
